<template>
  <div class="phone">
    <router-link to="Safe">
      <Back column="绑定手机号" />
    </router-link>
    <div class="phone-list">
      <el-form ref="form" :model="form">
        <el-form-item>
          <el-input
            size="small"
            v-model="input2"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <button type="button" class="getPassword">获取验证码</button>
          <el-input
            size="small"
            v-model="input3"
            placeholder="请输入手机验证码"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="sumbit" size="small" type="primary">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import Back from "../../components/back/index.vue"
  export default {
    name: "Phone",
    components: { Back },
    data() {
      return {
        form:{},
        input2: "",
        input3: "",
      }
    },
    methods: {},
  }
</script>
<style lang='scss'>
  .phone-list {
    height: 70%;
    padding: 30px;
    .el-input__inner {
      background-color: #202328;
      border: none;
      &::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.2);
      }
      &::-moz-placeholder {
        color: rgba(255, 255, 255, 0.2);
      }
      &:-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.2);
      }
      &:-moz-placeholder {
        color: rgba(255, 255, 255, 0.2);
      }
    }
    .el-form-item {
      margin-bottom: 10px;
    }
    .getPassword {
      position: absolute;
      top: 8px;
      cursor: pointer;
      right: 2px;
      width: 80px;
      height: 25px;
      border-radius: 5px;
      line-height: 25px;
      z-index: 2;
      background-color: #34393f;
      color: #fff;
      font-size: 12px;
      text-align: center;
      outline: none;
      border: none;
    }
    .sumbit {
      width: 100%;
    }
  }
</style>